<!--
 * @Description: 
 * @Date: 2023-02-23 18:06:20
 * @LastEditors: czp
 * @LastEditTime: 2023-04-21 15:05:31
-->
<template>
	<div class="yan-huo-wei">
		<!-- 农作农事 -->
		<div class="title">农作农事</div>
		<div class="list">
			<VideoCard :video="item" v-for="(item, index) in workList" :key="index" />
		</div>

		<!-- 农作农事 -->
		<div class="title">手艺活</div>
		<div class="list">
			<VideoCard :video="item" v-for="(item, index) in activityList" :key="index" />
		</div>

		<!-- 农作农事 -->
		<div class="title">乡村活动</div>
		<div class="list">
			<VideoCard :video="item" v-for="(item, index) in freeTimeList" :key="index" />
		</div>
	</div>
</template>
<script setup lang="ts" name="Life">
import VideoCard from "~C/VideoCard/index.vue";
import { useBaseStore } from "@/store/base";

const { cosPrefix } = useBaseStore();
const workList = [
	{ title: "农家生活", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/1.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/1.mp4", viewer: 1583 },
	{ title: "花椒修枝", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/2.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/2.mp4", viewer: 1583 },
	{ title: "耕地播种", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/3.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/3.mp4", viewer: 1583 },
	{ title: "烤烟种植", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/4.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/4.mp4", viewer: 1583 },
	{ title: "稻田丰收", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/5.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/5.mp4", viewer: 1583 },
	{ title: "葡萄采摘", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/6.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/6.mp4", viewer: 1583 },
	{ title: "桃子采摘", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/7.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/7.mp4", viewer: 1583 },
	// { title: "农耕时节", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/8.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/8.mp4", viewer: 1583 },
	{ title: "采摘沃柑", img: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/9.png", src: cosPrefix + "three-level/xianglv/yanhuowei/nongzuonongshi/9.mp4", viewer: 1583 }
];

const activityList = [
	{ title: "竹编", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/1.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/1.mp4", viewer: 1583 },
	{ title: "蜡染", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/2.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/2.mp4", viewer: 1583 },
	{ title: "木工手作", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/3.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/3.mp4", viewer: 1583 },
	{ title: "打石磨盘", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/4.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/4.mp4", viewer: 1583 },
	{ title: "蒲叶吹奏", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/5.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/5.MP4", viewer: 1583 },
	{ title: "沉浸式砌墙", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/6.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/6.mp4", viewer: 1583 },
	{ title: "磨豆腐", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/7.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/7.mp4", viewer: 1583 },
	{ title: "打糍粑", img: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/8.png", src: cosPrefix + "three-level/xianglv/yanhuowei/shouyihuo/8.mp4", viewer: 1583 }
];

const freeTimeList = [
	{
		title: "荆竹村晚",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/1.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/1.mp4",
		viewer: 1583
	},
	{ title: "刨猪宴", img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/2.png", src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/2.mp4", viewer: 1583 },
	{
		title: "快乐歌唱",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/3.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/3.mp4",
		viewer: 1583
	},
	{
		title: "篝火晚会",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/4.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/4.mp4",
		viewer: 1583
	},
	{
		title: "亲子活动",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/5.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/5.mp4",
		viewer: 1583
	},
	{
		title: "田蜜射击",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/6.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/6.mp4",
		viewer: 1583
	},
	{
		title: "无有图书馆之休闲时光",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/7.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/7.mp4",
		viewer: 1583
	},
	{
		title: "雪中作乐",
		img: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/8.png",
		src: cosPrefix + "three-level/xianglv/yanhuowei/xiangcunhuodong/8.mp4",
		viewer: 1583
	}
];
</script>
<style lang="scss" scoped>
.yan-huo-wei {
	padding: 0 320px 40px;
	.title {
		margin-top: 80px;
		font-size: 24px;
		text-align: center;
	}
	.list {
		display: flex;
		flex-wrap: wrap;
		padding-top: 0;
	}
}

@media all and (max-width: 750px) {
	.yan-huo-wei {
		padding: 16px;
		.title {
			margin-top: 20px;
		}
	}
}
</style>
